<template>
  <div class="sort-list-container">
    <GoodsItem v-for="good in goodsList" :key="good" :good="good"/>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
import GoodsItem from '@/views/Category/components/goods-item'
export default {
  components: { GoodsItem },
  setup () {
    const goodsList = ref([])
    const route = useRoute()
    // 请求参数
    const reqParams = {
      page: 1,
      pageSize: 20,
      categoryId: route.params.id,
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    }
    async function getGoodsList () {
      const res = await findSubCategoryGoods(reqParams)
      goodsList.value = res.result.items
    }
    onMounted(() => {
      getGoodsList()
    })
    return {
      goodsList
    }
  }
}
</script>
<style lang="less" scoped>
.sort-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
  }
  p {
    padding-top: 10px;
  }
  .name {
    font-size: 16px;
  }
  .desc {
    color: #999;
    height: 29px;
  }
  .price {
    color: @priceColor;
    font-size: 20px;
  }
}
</style>
